<template>
  <SLayout>
    <SearchForm ref="searchRef" @search="flushedTable" />
    <SLayoutContent>
      <n-card>
        <Toolbar @get-list="flushedTable"/>
        <SDataTable
            ref="tableRef"
            type="page"
            :columns="columns"
            @getData="getData"
        />
      </n-card>
      <Drawer v-model:drawerShow="drawerShow" :selected="selected"/>
    </SLayoutContent>
  </SLayout>
</template>
<script setup  name="SM-DICT_TYPE">
import SearchForm from "@/views/admin/sys/dict/SearchForm.vue";
import Drawer from "@/views/admin/sys/dict/drawer/index.vue";
import { NBadge, NButton, NSpace} from "naive-ui";
import {h,  ref} from "vue";
import {delDictTypeById, getDictType} from "@/api/system/dictApi";
import Toolbar from "@/views/admin/sys/dict/toolbar/Toolbar.vue";
import SLayout from "@/components/ExtLayout/SLayout.vue";
import SLayoutContent from "@/components/ExtLayout/SLayoutContent.vue";
import SDataTable from "@/components/public/SDataTable.vue";

const searchRef = ref()
const tableRef = ref()
const selected = ref({})
const drawerShow = ref('')
const columns = [
  {
    title: '字典名称',
    key: 'typeName',
    width:100,
    ellipsis:true
  },
  {
    title: '字典代码',
    key: 'typeCode',
    render(rowData){
      return h('div',[
        h(NBadge,{
          dot: true,
          type:"success",
          offset:[1,-1],
          onClick:()=> {getRowData(rowData);drawerShow.value='dictCode';}
        }),
        rowData.typeCode
      ])
    }
  },
  {
    title: '操作',
    key: 'option',
    width:200,
    render:(row,index)=>{
      return h(NSpace,null,()=> [
        h(NButton,{
              size:"tiny",
              type: 'primary',
              round:true,
              onClick:()=> {getRowData(row);drawerShow.value='info';}
            },
            {default:() => '修改'}
        ),
        h(NButton,{
              size:"tiny",
              type: 'primary',
              round:true,
              onClick:()=> {getRowData(row);drawerShow.value='dictCode';}
            },
            {default:() => '查看'}
        ),
        h(NButton,{
              size:"tiny",
              type: 'error',
              round:true,
              onClick:()=> {delData(row)}
            },{default:() => "删除"}
        ),
      ])
    }
  },
]
const getRowData = (row)=>{
  selected.value = row;
}

// 刷新表格
const flushedTable = ()=>{
  tableRef.value.getList();
}
const getData = (callback,page,pageSize)=>{
  const params = {
    ...searchRef.value.searchParam
  }
  getDictType(page,pageSize,params).then(res=>{
    const data = res.data;
    callback(data)
  })
}

const delData = (row)=>{
  delDictTypeById(row?.id).then(res=>{
    flushedTable();
  })
}
</script>
